<template>
	<div class="desktop" id="desktop">
		<div class="wallpaper-container" :style="{ background: 'url(' + $coreStore.wallpaper + ')'  }"  >
			<div class="icon-grid-container" @mousedown.self="onMousedown($event)">
				<appIcon v-for="(item,index) in icons" :key="item.id" :item="item" :order="index"></appIcon>
			</div>
		</div>
		<Taskbar></Taskbar>
		<ContextMenu :display="$coreStore.contextMenu.show" :position="{x:$coreStore.contextMenu.x,y:$coreStore.contextMenu.y}"></ContextMenu>
		<Sidebar :sidebarShow="$coreStore.sidebar"></Sidebar>
	</div>
</template>
<script setup name="desktop">
	import {reactive,defineProps,defineEmits,onMounted,onUnmounted,computed} from 'vue';
	import Taskbar from './Taskbar.vue';
	import ContextMenu from './ContextMenu.vue';
	import Sidebar from './Sidebar.vue';
	import appIcon from './Icon.vue';
	import coreStore from '../stores/core.js';


	const $coreStore = coreStore();
	
	onMounted(()=> {
		$coreStore.init();
		//oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单
		document.oncontextmenu = new Function('event.returnValue=false');
		//onselectstart几乎可以用于所有对象，其触发时间为目标对象被开始选中时（即选中动作刚开始，尚未实质性被选中）
		document.onselectstart = new Function("event.returnValue=false");
		//$store.commit('core/APP_INIT');
		
		console.log('-> desktop init');
	});
	
	onUnmounted(()=>{
	})
	
	const icons = computed(() => {
		let icons = []
		$coreStore.applications.forEach(item => {
			if(item.link){
				icons.push(item)
			}
		})
		return icons;
	});
	
	const onMousedown = function(event) {
		if (event.button == 2) {
			$coreStore.showContextMenu(event.clientX,event.clientY,'wall',{});
			event.stopPropagation(); //防止事件进一步传播到上层元素
		} else {
			$coreStore.closeContextMenu();
		}
		$coreStore.selectIcon('');
		$coreStore.switchSidebar(false);
	}
</script>

<style lang="less" scoped>
	.desktop{
		width: 100%;
		height: 100%;
	}
	.wallpaper-container {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		right: 0;
		background-position: center center;
		background-repeat:no-repeat;
		background-size: contain;
	}
	.icon-grid-container {
		width: 100%;
		height: 100%;
		display: grid;
		grid-auto-flow: column;
		grid-template-rows: repeat(auto-fill, 100px);//repeat(6, minmax(60px, auto));
		grid-template-columns: repeat(auto-fill, 100px);//repeat(9, minmax(60px, auto));
		grid-gap: 10px;
		padding:1% 1%;
	}
</style>
